<!-- 商品详情 -->
<template>
    <el-container id="top">
        <el-aside :style="{ width: '45%', margin: '30px', height: '480px' }">
            <el-carousel height="480px">
                <el-carousel-item>
                    <img :src="api.imgUrl + goodData.image1" alt="" :style="{ width: '80%' }">
                </el-carousel-item>
                <el-carousel-item>
                    <img :src="api.imgUrl + goodData.image2" alt="" :style="{ width: '80%' }">
                </el-carousel-item>
            </el-carousel>
        </el-aside>
        <el-main :style="{ width: '55%', margin: '30px', height: '400px' }">
            <p class="context1">{{ goodData.name }}</p>
            <p class="context2">{{ goodData.intro }}</p>
            <p class="context3">
                ￥{{ goodData.price }}
                <el-button type="warning" @click="addshopCar(goodData.id)">加入购物车</el-button>
            </p>
        </el-main>
    </el-container>
    <el-container>
        <el-main>
            <!-- 推荐栏 -->
            <el-menu class="el-menu-demo" mode="horizontal" text-color="#E6A23C" active-text-color="#E6A23C"
                @select="handleSelect" :ellipsis="false">
                <el-menu-item class="secondtitle">猜你喜欢！</el-menu-item>
            </el-menu>
            <el-row :gutter="24">
                <el-col :span="8" v-for="(goods, index) in recommend" :key="index">
                    <el-card :body-style="{ padding: '0px' }" shadow="hover" v-if="index < 3">
                        <!-- 此处bug未解决：更新查询 -->
                        <router-link :to="{ name: 'detail', params: { id: goods.id } }">
                            <img :src="api.imgUrl + goods.cover" class="image">
                        </router-link>
                        <div :style="{ padding: '14px' }">
                            <span>{{ goods.name }}</span>
                            <div class="bottom">
                                <span class="intro">{{ goods.intro }}</span>
                                <span>￥{{ goods.price }}</span>
                                <el-button text class="button" @click="addshopCar(goods.id)">加入购物车</el-button>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </el-main>
    </el-container>
</template>
<script setup>
import api from '@/api/api'
import { useRoute, useRouter } from 'vue-router';
import { onMounted, ref, watch } from 'vue';
import { useStore } from 'vuex';
import { ElMessage } from 'element-plus';

const store = new useStore();
const route = new useRoute();
const router = new useRouter();

const addshopCar = (id) => {
    if (store.getters.isLogin) {
        api.addshopcar(id, store.getters.userInfo.id)
            .then(ret => {
                if (ret.flag) {
                    ElMessage({
                        message: "添加成功",
                        type: "success"
                    })
                }
                else {
                    ElMessage({
                        message: "添加失败",
                        type: "error"
                    })
                }
            })
    }
    else {
        ElMessage({
            message: "请先登录！",
            type: "error"
        })
        router.push({ name: 'login' })
    }
}

const goodData = ref({});
const recommend = ref({});

const init = () => {
    api.getGoodsById(route.params.id)
        .then(ret => {
            goodData.value = ret.result;
        })
    console.log(goodData);

    api.getRecommend(1)
        .then(ret => {
            recommend.value = ret.result;
        })
    console.log(recommend);
}

// 监听路由变化
watch(route, () => {
    init.apply();
    // 回到页面最顶
    window.scrollTo(0, 0);
});
onMounted(init);

</script>
<style scoped>
.context1 {
    font-size: 50px;
}

.context2 {
    text-align: left;
    font-size: 15px;
}

.context3 {
    font-size: 40px;
    text-align: left;
}

.el-button {
    height: 60px;
    float: right;
}

/* 推荐区块样式 */
.secondtitle {
    font-size: 25px;
    font-weight: bold;
}

.intro {
    text-align: left;
    font-size: 12px;
    color: #999;
    width: 150px;
}

.bottom {
    margin-top: 13px;
    line-height: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100px;
}

.button {
    padding: 0;
    min-height: auto;
}

.el-card {
    margin: 30px;
}

.image {
    width: 100%;
    display: block;
}

.el-col {
    margin-top: 20px;
}

.gomany {
    width: 200px;
    height: 50px;
    font-size: 20px;
}
</style>